<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>智能电表交互记录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/public_main.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/public.css" />-->
	</head>
	<style type="text/css">
		.remove {
			cursor: pointer;
		}
		
		.remove:hover {
			color: red;
		}
		
		.pagination span {
			font: 14px/34px "";
			padding: 0 5px;
		}
		
		.form-control {
			display: inline-block;
			width: 120px;
		}
		
		.search {
			width: 155px;
		}
		
		.header {
			/*border-bottom: 1px solid #fefefe;*/
		}
		
		.header span {
			padding: 0 5px;
		}
		
		ul {
			display: block;
			list-style-type: disc;
			margin-block-start: 0em;
			margin-block-end: 0em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			padding-inline-start: 0px;
		}
		
		li {
			list-style-type: none;
			display: flex;
			justify-content: flex-start;
			border-bottom: 1px solid #ebebeb;
			font: 14px/28px "";
		}
		
		li span {
			display: inline-block;
			width: 20%;
		}
		
		li p {
			width: 100%;
			text-align: center;
			font: 14px/28px "";
			margin: 0;
		}
		
		.table_cla {
			height: 560px;
		}
		
		#shenhe {
			width: 500px;
		}
		
		#shenhe ul li span {
			width: 30%;
		}
		
		#shenhe ul li s {
			width: 70%;
		}
	</style>

	<body>
		<div id="app" style="width: 100%; margin: 0 auto;padding:0 20px;">
			<div class="box-header with-border">
				<h3 class="box-title">生成结算单</h3>
			</div>
			<div class="header" style="margin-top: 20px;">
				<label style="margin-left: 10px;" for="">开始时间</label>
				<input style="width: 150px;" class="form_datetime form-control" type="text" id="datetimepicker" v-model="start" placeholder="请选择开始时间">
				<label style="margin-left: 10px;" for="">结束时间</label>
				<input style="margin-left: 10px;" style="width: 150px;" class="form_datetime form-control" type="text" id="datetimepicker1" v-model="end" placeholder="请选择结束时间">
				<button type="button" class="btn btn-info " data-dismiss="modal" @click="search">搜索</button>

			</div>
			<div id="aaa" class="box-body" style="margin-top: 20px;width: 800px;display: none;">
				<table class="table table-bordered">
					<tr>
						<th>小区</th>
						<th>支付宝金额</th>
						<th>支付宝条数</th>
						<th>微信金额 </th>
						<th>微信条数</th>
						<th>总条数 </th>
						<th>总金额</th>
					</tr>
					<tbody id="tbbb">
						<tr>
							<th v-text="data_table.areaname"></th>
							<th v-text="data_table.ali"></th>
							<th v-text="data_table.alicount"></th>
							<th v-text="data_table.weixin"></th>
							<th v-text="data_table.weixincount"></th>
							<th v-text="data_table.count"></th>
							<th v-text="data_table.paymentamt"></th>
						</tr>
					</tbody>
				</table>
				<label style="margin-left: 10px;" for="">单据号</label>
				<input style="margin-left: 10px;" class="form_datetime form-control" type="text" v-model="billcode" placeholder="请输入单据号" />
				<label style="margin-left: 10px;" for="">单据日期</label>
				<input style="margin-left: 10px;" class="form_datetime form-control" type="text" id="datetimepicker2" v-model="billdate" placeholder="请选择单据日期">
				<button style="display: block;margin: 50px auto;" type="button" class="btn btn-info " @click="sure_jiesuan">确定生成</button>
			</div>
			<!--<div class="table_cla">
			<h3 class="box-title">结算单信息</h3>
				<div id="shenhe" class="modal-body">						
						<ul id="ppp">
							<div  class="tab-content">
								<div class=" tab-pane fade in active">
									<li>
										<span>支付宝金额:</span><s v-text="data_table.ali"></s>
									</li>
									<li>
										<span>支付宝条数:</span><s  v-text="data_table.alicount"></s>
									</li>
									<li>
										<span>微信金额:</span><s v-text="data_table.weixin"></s>
									</li>
									<li>
										<span>微信条数 :</span><s v-text="data_table.weixincount"></s>
									</li>
									<li>
										<span>总条数 :</span><s v-text="data_table.count"></s>
									</li>
									<li>
										<span>总金额  :</span><s v-text="data_table.paymentamt"></s>
									</li>									
								</div>
							</div>
						</ul>
				</div>
			</div>-->
			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
<script>
	//	var urlr = "http://192.168.0.30:8085"
	new Vue({
		el: '#app',
		data: {
			val_te: "",
			urlr: "",
			current: 1,
			showItem: 5,
			count_all: "",
			allpage: "",
			jump: "",
			page_show: false,
			tips_modal: "",
			areaid: "",
			start: "",
			end: "",
			billdate: "",
			searchmain: "",
			panduan: "",
			result_model: "",
			operate_model: "",
			model_data: "",
			userid: "",
			areaid_settle: "",
			organizeid: "",
			areaid: "",
			property_name: [{
				organizeid: "",
				shortname: "请选择物业"
			}],
			village_name: [{
				areaid: "",
				areaname: "请选择小区"
			}],
			data_table: {},
			show: false,
			billcode: "",
		},
		//计算属性
		computed: {},
		created: function() {
			var that = this;
			var aa = getUrl();
			that.urlr = aa;
		},
		mounted: function() {
			var that = this;
			var userId = sessionStorage.getItem("userId");
			if(userId == "" || userId == undefined || userId == null) {
				top.location.href = "../login.html";
			} else {
				that.urltest = sessionStorage.getItem("urltest");
				that.userId = sessionStorage.getItem("userId");
				that.fullname = sessionStorage.getItem("fullname");
				that.userName = sessionStorage.getItem("userName");
				that.areaid_settle = sessionStorage.getItem("areaid_settle");
				if(that.areaid_settle == '') {
					that.tips_modal = '请先到结算单列表页面选择需要生成结算单的小区';
					$('#myModal_tips').modal('show');
					return
				}
				that.selectSettleStartDay(that.areaid_settle);
				sessionStorage.setItem("areaid_settle", '');
				this.datePickerInit();
			}
		},

		methods: {
			datePickerInit: function() {
				var d, s;
				var self = this;
				self.start = s;
				$('#datetimepicker').datetimepicker({
					language: 'zh-CN',
					format: 'yyyy-mm-dd',
					startView: 'month',
					minView: 'month',
					todayBtn: 1,
					autoclose: 1,
				});
				$('#datetimepicker1').datetimepicker({
					startDate: s,
					minView: "month", //选择日期后，不会再跳转去选择时分秒 
					language: 'zh-CN',
					format: 'yyyy-mm-dd',
					todayBtn: 1,
					autoclose: 1,
				});
				$('#datetimepicker2').datetimepicker({
					minView: "month", //选择日期后，不会再跳转去选择时分秒 
					language: 'zh-CN',
					format: 'yyyy-mm-dd',
					todayBtn: 1,
					autoclose: 1,
				});
				$('#datetimepicker2').datetimepicker('setEndDate', '2099-12-99');
				$('#datetimepicker').datetimepicker()
					.on('hide', function(ev) {
						var value = $("#datetimepicker").val();
						self.start = value;
						$('#datetimepicker1').datetimepicker('setStartDate', self.start);
						self.end = "";
					});
				$('#datetimepicker1').datetimepicker()
					.on('hide', function(ev) {
						var value = $("#datetimepicker1").val();
						self.end = value;
					});
				$('#datetimepicker2').datetimepicker()
					.on('hide', function(ev) {
						var value = $("#datetimepicker2").val();
						self.billdate = value;
					});
			},
			//获取上次截止时间
			selectSettleStartDay: function(areaid_settle) {
				var that = this;
				var req3 = JSON.stringify({
					requestString: JSON.stringify({
						areaid: areaid_settle,
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + '/verify/financial/selectSettleStartDay',
					data: req3,
					async: true,
					dataType: "json",
					success: function(msg) {
						if(msg.responseCode == 200) {
							that.start = JSON.parse(msg.returnString).begday;
							var now = new Date();
							
							var aa = now.setDate(now.getDate() - 1);
							
							var bb =new Date(that.start);
							var cc = bb.setDate(bb.getDate())
							if(cc > aa) {
								that.end = '';
								$('#datetimepicker').datetimepicker('setStartDate', that.start);
								$('#datetimepicker').datetimepicker('setEndDate', new Date(aa));
								that.end = JSON.parse(msg.returnString).begday;
								$('#datetimepicker1').datetimepicker('setStartDate', that.start);
								$('#datetimepicker1').datetimepicker('setEndDate', new Date(aa));
							} else {
								$('#datetimepicker').datetimepicker('setStartDate', that.start);
								$('#datetimepicker').datetimepicker('setEndDate', new Date(aa));
								$('#datetimepicker1').datetimepicker('setEndDate', new Date(aa));
							}

						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			search: function() {
				var that = this;
				if(that.end == '') {
					that.tips_modal = '请选择结算单的结束时间';
					$('#myModal_tips').modal('show');
					return
				}
				if(that.end == that.start){
					that.tips_modal = '最新结算单已经生成';
					$('#myModal_tips').modal('show');
					return
				}
				var data = JSON.stringify({
					requestString: JSON.stringify({
						begday: that.start,
						endday: that.end,
						areaid: that.areaid_settle
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/verify/financial/selectSettleOrderList",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						console.log(msg)
						if(msg.responseCode == 200) {
							var data = JSON.parse(msg.returnString);
							console.log(data);
							that.data_table = data.total;
							$("#aaa").css("display", "block")
						} else {
							//							alert(msg.disp)
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});

			},
			//确定生成结算单
			sure_jiesuan: function() {
				var that = this;
				if(that.billcode == '') {
					that.tips_modal = '请先输入结算单号';
					$('#myModal_tips').modal('show');
					return
				}
				if(that.billdate == '') {
					that.tips_modal = '请先选择结算单时间';
					$('#myModal_tips').modal('show');
					return
				}
				var data = JSON.stringify({
					requestString: JSON.stringify({
						payenddate: that.end,
						billcode: that.billcode,
						billdate: that.billdate,
						paybegdate: that.start,
						areaid: that.areaid_settle,
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				console.log(data);
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/verify/financial/addOrgainzeSettle",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						console.log(msg)
						if(msg.responseCode == 200) {
							that.tips_modal = '生成结算单成功';
							$('#myModal_tips').modal('show');
							$('#myModal_tips').on('hide.bs.modal', function() {
								window.location.href = 'Settlement_sheet.html';
							})
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
		},

	})
</script>